<template>
  <div class="ExamView">
    <div class="main">
      <div class="top">
        <el-input
          v-model="input"
          placeholder="搜索竞赛名称"
          class="search"
        ></el-input>
        <div class="block">
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="table">
        <el-table :data="arr" style="width: 100%">
          <el-table-column fixed prop="name" label="竞赛名称" width="300">
          </el-table-column>
          <el-table-column prop="xiand" label="答题限定" width="380">
          </el-table-column>
          <el-table-column prop="startTime" label="开始时间" width="380">
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间" width="380">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="dialogFormVisible = true">增加</el-button>
              <el-button
                type="text"
                size="small"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 50, 100, 500, 1000]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="10"
        >
        </el-pagination>
      </div>
    </div>



    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="竞赛名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="答题限定">
          <el-input v-model="form.xd" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="开始时间">
          <el-input v-model="form.startTime" autocomplete="off"></el-input>
        </el-form-item> 
        <el-form-item label="结束时间">
          <el-input v-model="form.endTime" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="fntrue"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ExamView",
  data() {
    return {
      value2: "",
      arr: null,
      input: "",
      currentPage4: 4,
      dialogFormVisible: false,
      form:{
        name:"",
        xd:"",
        startTime:"",
        endTime:"",
      }
    };
  },
  methods: {
    fntrue(){//4.点击弹出框  把dialogFormVisible为false  关闭弹出框
      this.dialogFormVisible = false
      return this.addhead()//5.执行  添加业务的addhead这个函数
    },
    async addhead(){//1.添加一个增加的业务
        let name=this.form.name;//2.获取弹出框里面的每个数据
        let xd=this.form.name;
        let startTime=this.form.startTime
        let endTime=this.form.endTime
        let {data}=await axios.post("/api/add",{name,xd,startTime,endTime})//3.把数据传送过去
        console.log(data);
        this.getExam()  //最后一步更新页面的数据
    },
    handleClick(row) {
      console.log(row);
    },
    async getExam() {
      let { data } = await axios.get("/api/mock");
      console.log(data);
      this.arr = data;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    async handleDelete(res) {
      console.log(res);
      let { data } = await axios.delete("/api/examdelete/" + res);
      console.log(data);
      this.getExam();
    },

  },
  created() {
    this.getExam();
  },
};
</script>
<style scoped lang="less">
.ExamView {
  width: 100%;
  height: 100vh;
  background: #eee;
  overflow: hidden;
  .main {
    width: 1586px;
    height: 608px;
    background: #fff;
    margin: 20px auto;
    overflow: hidden;
    .top {
      width: 1000px;
      height: 56px;
      margin: 20px 0 0 20px;
      .search {
        width: 250px;
        float: left;
        margin-right: 50px;
      }
    }
    .table {
      height: 300px;
      margin-left: 20px;
      /deep/.cell {
        text-align: center;
      }
      /deep/.el-table th.el-table__cell > .cell {
        font-size: 16px;
        color: #000;
      }
    }
    .pagination {
      display: flex;
      justify-content: center;
      position: absolute;
      bottom:0px;
      left:40%
    }
  }
}
</style>